<template>
	<view class="hmj-index">
		<!-- 自定义tabBar -->
		<view class="idn-top h423 pl35">
			<view class="top-local dis_flex w166" :style="{'marginTop':statusHeight}">
				<image src="../../static/image/icon-local-fff.png" mode="widthFix" class="w34"></image>
				<view class="fz30 fw">{{district}}</view>
			</view>
		</view>
		<!-- 轮播区域 -->
		<view class="w700 auto ind-banner">
			<u-swiper :list="banner_list" height="134" :indicator="true" indicatorActiveColor="#FF961F"
				indicatorInactiveColor="rgba(255, 255, 255, .8)" indicatorMode="dot" :circular="true"
				imgMode="aspectFill" radius="8"></u-swiper>
		</view>
		<!-- 内容区域 -->
		<view class="ind-content">
			<!-- 金刚区 -->
			<view class="cnt-icon">
				<view class="scroll-list__line dis_flex" v-for="(item, index) in menu_list" :key="index">
					<view class="scroll-list__line__item w120 h120" style="display: flex; flex-direction: column; align-items: center;" v-for="(item1, index1) in item" :key="index1"
						@click="jump_order_info(item1,item1.name)">
						<image class="w96" :src="item1.image" mode="widthFix"></image>
						<view class="tac fz24">{{ item1.name }}</view>
					</view>
				</view>
			</view>
			<!-- smallBanner板块 -->
			<view class="ind-sBanner mt40 dis_flex">
				<view class="o-banner w340 h296 dfd_c" @click="goSelectAunt">
					<text class="fz32 lh44 fw">保姆月嫂</text>
					<text class="fz22 lh32">不满意任意换</text>
				</view>
				<view class="t-banner w340 h296 dfd_c dis_flex">
					<view class="w340 h136 dfd_c" @click="goRushPipe">
						<text class="fz32 lh44 fw">管道疏通</text>
						<text class="fz22 lh32">疏通彻底一步到位</text>
					</view>
					<view class="w340 h136 dfd_c" @click="goServeDetail">
						<text class="fz32 lh44 fw">擦玻璃</text>
						<text class="fz22 lh32">窗更近心更明</text>
					</view>
				</view>
			</view>
			<!-- subBanner -->
			<view class="mt30 bs6" @click="goAssocList">
				<image class="w702" style="height: 212rpx" src="https://hmj-test-oss.oss-cn-beijing.aliyuncs.com/uploads/20221019/0c0707c8fb1c1e348e13d33e9868e806.png" mode=""></image>
			</view>
			<!-- 工作人员板块 -->
			<view class="ind-worker mt35 auto">
				<view class="modul-title dis_flex">
					<text class="fz32 pl20 fw">工作人员</text>
						<view class="dis_f" @click="goWorker">
							<text class="fz24 mr8" style="color: #888B99;">查看更多</text>
							<image class="w16 h16" src="/static/image/user_you.png" mode="aspectFill"></image>
						</view>
				</view>
				<view class="oh w702 mt20 ml12 radius16">
					<u-scroll-list :indicator="false">
						<view class="cardinfo w212  mr16 bac_f pt30 pb30 bs6 dfd_c ac radius16"
							v-for="(item, i) in aunt_list" :key="i" style="min-width: 212rpx" @click="goAuntDetail(item)">
							<image class="w88 h88 radius501" :src="item.avatar_image" mode="aspectFill"></image>
							<view class="mt16 fw fz30" style="color: #333333">{{
                item.name
              }}</view>
							<view class="mt8 fz26 tf_999" style="color: #666666">
								<text>{{item.age}}岁</text>
								<text class="pl10 pr10">|</text>
								<text v-if="item.exp!=null">{{item.exp}}年经验</text>
								<text v-else>0年经验</text>
							</view>
							<view class="mt10">
								<u-rate :count="xincount" :size="10" readonly :value="item.star" active-color="#FF970E"></u-rate>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
			<!-- 找工作板块 -->
			<view class="ind-job mt34 auto">
				<view class="modul-title dis_flex">
					<text class="fz32 pl20 fw">找工作</text>
					<navigator open-type="switchTab" url="/pages/recruitOnline/recruitOnline" hover-class="none">
						<view class="dis_f">
							<text class="fz24 mr8" style="color: #888B99;">查看更多</text>
							<image class="w16 h16" src="/static/image/user_you.png" mode="aspectFill"></image>
						</view>
					</navigator>
				</view>
				<view class="job-card bac_f pt30 pl30 pb30 pr30 mt20 radius16">
					<view class="fz30">
						<u-tabs :current="joy_type" lineWidth="20" lineHeight="7"
							:lineColor="`url() 100% 100%`"
							:list="tabs" itemStyle="padding-left: 20rpx; padding-right:20rpx; height: 42px;"
							:activeStyle="{
                color: '#222222',
                fontWeight: 'bold',
                transform: 'scale(1.05)',
              }" :inactiveStyle="{
                color: '#999999',
                transform: 'scale(1)',
              }" @click="tabClick"></u-tabs>
					</view>
					<view class="dis_flex fww">
						<view class="radius8 padding24 bz mt16" style="
                width: 314rpx;
                height: 174rpx;
                background-color: #fef8f6;
                border: 1px solid #ffe9e5;
              " v-for="(item, i) in job_list" :key="i" @click="goJobDetail(item)">
							<view class="">
								<view class="oh" style="min-height: 42rpx;max-height: 42rpx;"><text v-if="item.label_arr[0].length!=0" class="fz20 tf_666 mr12 border1 tac pl12 pr12 radius4"
										v-for="(value, i) in item.label_arr" :key="i">{{ value }}</text>
										</view>
							</view>
							<view class="fz28 mt10">
								<text class="tf_22 fw">{{ item.name }}</text>
								｜
								<text class="tf_666">{{ item.num }}人</text>
							</view>
							<view class="dis_f mt6">
								<view class="tf30 tf_4537 fz30 fw">{{item.salary}}</view>
								<view class="ml12 dis_f jc radius4" style="
                    background-color: #ffdeca;
                    color: #713f2d;
                    font-size: 16rpx;
                    width: 60rpx;
                    height: 26rpx;
                  ">
									新职位
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 关于我们板块 -->
			<view class="ind-about mt24">
				<image class="about-image w702" style="height: 278rpx" src="https://hmj-test-oss.oss-cn-beijing.aliyuncs.com/uploads/20221014/70dd226dce7cbdd16a200d9ae7b3b815.png"
					mode="aspectFill"></image>
			</view>
		</view>
		<!-- 底部 -->
		<view class="ind-footer mt40">
			<image class="footer-image" src="../../static/image/logo_hmj.png" mode="widthFix"></image>
			<view class="fz20 tf10 mt18">联系电话：0351-6621111</view>
			<view class="fz20 tf10 mt4 dis_flex">
				<text>公司地址：太原市迎泽区桥东街2号</text>
				<image class="w16 h20 ml4" src="../../static/image/icon-local-gray.png" mode="widthFix"></image>
			</view>
		</view>
		<view style="height: 40rpx"></view>
	</view>
</template>

<script>
	import {
		banner,
		menuArr,
		getWorkerInfo,
		indexWork,
		indexFindWork,
		getCity
	} from "@/config/api.js";
	export default {
		data() {
			return {
				lab:[],
				statusHeight:'',//状态栏高度
				// area_id(暂时不用)
				// 城市名字
				address_name: "",
				//经纬度
				x: 0,
				y: 0,
				//当前城市/区
				district:'',
				//工作类型 全职or兼职
				joy_type: 0,
				tabs: [{
					name: "全职"
				}, {
					name: "零工"
				}],
				xincount: "5",
				xinscore: "4",
				banner_list: [],
				menu_list: [],
				aunt_list: [],
				job_list: [],
			};
		},
		onLoad() {
			this.getAuntList();
			this.getJobList();
			this.getBannerList();
			this.getMenuList();
			this.getWorkerlist()
			this.getFineWork()
			this.getLocation();
			let res = wx.getSystemInfoSync();
			this.statusHeight = res.statusBarHeight+10+'px';
		},
		methods: {
			//家政协会
			goAssocList(){
				uni.navigateTo({
					url: "../homeAssoc/homeAssoc",
				})
			},
			//管道疏通
			goRushPipe(){
				uni.reLaunch({
					url: "../class/class?cat1_id="+3,
				});
			},
			//切换工作类型
			tabClick(item){
				console.log(item);
				let type = item.name
				indexFindWork({type:type}).then(res=>{
					console.log(res);
					this.job_list = res
				})
			},
			//找工作
			getFineWork(){
				indexFindWork().then(res=>{
					console.log('工作',res);
					res.forEach(v=>{
						v.label_arr = v.label_arr.splice(0,2)
					})
					this.job_list = res;
				})
			},
			//工作人员展示
			getWorkerlist() {
				indexWork().then(res => {
					console.log('工作人员',res);
					this.aunt_list = res
				})
			},
			//跳转菜单分类界面
			jump_order_info(item1, name) {
				console.log(item1);
				if (name == '保姆月嫂') {
					uni.navigateTo({
						url: "../../page_serve/selectAunt/selectAunt",
					});
				} else if (name == '养老护理') {
					uni.navigateTo({
						url: '../../page_serve/oldCare/oldCare'
					});
				} else if (name == '拼团') {
					uni.navigateTo({
						url: '../../page_group/groupBooking/groupBooking/groupBooking'
					});
				} else {
					uni.reLaunch({
						url: '../class/class?cat1_id=' + item1.view
					});
				}
			},
			//获取菜单列表
			getMenuList() {
				menuArr().then((res) => {
					console.log("菜单", res);
					this.menu_list = res;
				});
			},
			//获取banner
			getBannerList() {
				banner().then((res) => {
					console.log("轮播图", res);
					let ress = res;
					for (var i = 0; i < ress.length; i++) {
						this.banner_list.push(ress[i].image);
					}
				});
			},
			//跳转工作人员
			goWorker(){
				uni.navigateTo({
					url: "../../page_job/worker/worker",
				});
			},
			//跳转甄选保姆页面
			goSelectAunt() {
				uni.navigateTo({
					url: "../../page_serve/selectAunt/selectAunt",
				});
			},
			//跳转工作人员详情
			goAuntDetail(e) {
				uni.navigateTo({
					url: "../../page_job/workerDetail/workerDetail?worker_id=" + e.id,
				});
			},
			//跳转工作详情
			goJobDetail(e) {
				uni.navigateTo({
					url: "../../page_job/jobDetail/jobDetail?id=" + e.id,
				});
			},
			//获取定位
			getLocation() {
				let that = this;
				// 获取用户是否开启 授权获取当前的地理位置、速度的权限。
				uni.getSetting({
					success(res) {
						console.log(res);
						// 如果没有授权
						if (!res.authSetting["scope.userLocation"]) {
							// 则拉起授权窗口
							uni.authorize({
								scope: "scope.userLocation",
								success() {
									//点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
									uni.getLocation({
										type: "wgs84",
										success: function(res) {
											console.log(res);
											that.x = res.longitude;
											that.y = res.latitude;
											// that.get_city();
										},
										fail(error) {
											console.log("失败", error);
										},
									});
								},
								fail(error) {
									//点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
									console.log("拒绝授权", error);
									uni.showModal({
										title: "提示",
										content: "若点击不授权，将无法使用位置功能",
										cancelText: "不授权",
										cancelColor: "#999",
										confirmText: "授权",
										confirmColor: "#FE9A28",
										success(res) {
											// console.log(res)
											if (res.confirm) {
												// 选择弹框内授权
												uni.openSetting({
													success(res) {},
												});
												// that.getLocation()
											} else if (res.cancel) {
												// 选择弹框内 不授权
												console.log("您选择了不授权");
												uni.setStorageSync("address_id", 221);
												uni.setStorageSync("address_name", "太原市");
												that.area_id = 221;
												that.address_name = "太原市";
											}
										},
									});
								},
							});
						} else {
							// 有权限则直接获取
							uni.getLocation({
								type: "wgs84",
								success: function(res) {
									console.log(res);
									that.x = res.longitude;
									that.y = res.latitude;
									that.getCity();
								},
								fail(error) {
									uni.showToast({
										title: "请勿频繁调用！",
										icon: "none",
									});
									console.log("失败", error);
								},
							});
						}
					},
				});
			},
			//获取城市定位
			getCity(){
				getCity({longitude:this.x,latitude:this.y}).then(res=>{
						console.log('城市',res);
						this.district = res.address_component.district
				})
			},
			//获取工作人员
			getAuntList() {
				this.aunt_list = this.aunt_list.slice(0, 4);
				// console.log(this.aunt_list);
			},
			//获取工作类型
			getJobList() {
				this.job_list = this.job_list.slice(0, 4);
			},
			// 选项卡点击事件(切换工作性质)
			tab_click(item) {
				// console.log(item);
			},
			goServeDetail() {
				uni.navigateTo({
					url: "../../page_serve/serveDetail/serveDetail?id=" + 1,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
	}

	// 金刚区
	.hmj-index {
		position: relative;
		.idn-top {
			background-image: url('https://hmj-test-oss.oss-cn-beijing.aliyuncs.com/uploads/20221019/4c1c078731bfb00d0887c82352e1bd45.png');
			overflow: hidden;
			color: #fff;
		}
		.ind-banner {
			position: absolute;
			top: 200rpx;
			left: 50%;
			transform: translateX(-50%);
		}
		.ind-content {
			padding: 0 24rpx;
			.cnt-icon {
				margin-top: 80rpx;
			}
		}
		.ind-sBanner {
			.o-banner {
				color: #ed5656;
				box-sizing: border-box;
				padding: 24rpx;
				background-image: url(@/static/image/sbanner1.png);
			}
			.t-banner {
				& view:first-child {
					color: #2869d1;
					box-sizing: border-box;
					padding: 24rpx;
					background-image: url(@/static/image/sbanner2.png);
				}
				& view:last-child {
					color: #7b58da;
					box-sizing: border-box;
					padding: 24rpx;
					background-image: url(@/static/image/sbanner3.png);
				}
			}
		}
		.ind-about {
			.about-image {
				height: 478rpx;
			}
		}
		.ind-footer {
			display: flex;
			flex-direction: column;
			align-items: center;

			.footer-image {
				width: 154rpx;
				height: 36rpx;
			}
		}
	}
</style>
